<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="web/common::head"></head>
<style>
	html,body{
		height:100%;
	}
	.tdt-control-copyright{display: none}
	.tdt-control-container .tdt-top{bottom:30px;top: auto;}
	#controller li,.controlbutton{float: left; background-image: linear-gradient(#019ee3, #011e9c);border-radius:0;line-height: 45px;border-right: 1px solid #011e9c}
	#controller li div{display: none;font-size: 14px;}
	#controller li:hover div{display: block}
	#controller li:hover i{display: none}
	#controller li i{ font-size: 22px;}
	.missionMenu{position: absolute;left: 15px;top:60px; z-index: 9999}
	.missionMenu  a{width:60px; height: 60px; display: block;background: #333; margin-top:2px;position:relative; text-align: center;color:#fff;}
	.missionMenu  a i{font-size:24px; color: #fff; line-height: 50px; display: block}
	.missionMenu  a div{color: #fff;line-height: 30px; width: 100%; text-align: center;position: absolute;z-index: 1000;bottom: 0px;font-size: 14px;  }
	.missionMenu  a:hover{opacity:0.85}
	.missionListSelected{ background-image: linear-gradient(#123123, #654321);width:240px;border-radius:0;padding:0 20px; line-height: 40px; text-align: left;color: #fff;}
	.missionList{ background-image: linear-gradient(#aa3456, #654321);width:240px;border-radius:0;padding:0 20px; line-height: 40px; text-align: left;color: #fff;}
	.people-li{ font-size: 12px; width: 100%; border-bottom: 1px solid #ccc;float: left;clear: both;line-height: 30px; padding:5px 0 }
	.people-li div{float: left}
	.people-li img{ width: 25px; height: 25px;margin-right: 5px; margin-left: 5px}
</style>
<body class="layui-layout-body" style="overflow: hidden;height:100%;background: url('/images/bg.jpg') center center / cover repeat fixed;">
<div class="layui-layout layui-layout-admin"  >

	<div class="layui-header" style="z-index: 1000;" >
		<span th:replace="web/common::crane"></span>
	</div>
</div>

<div id="container"></div>


<div id="missionView" class="layui-card" style="display:none;left: 15px; bottom: 20px;width:800px;padding:0 20px;line-height: 40px; overflow: hidden;z-index: 888;position: fixed;   background:rgb(255,255,255,0.7);box-shadow: 0 0 5px #ccc; ">
	    当前任务 : <font id="missionName"></font> 任务介绍 : <font id="missionDesc"></font>
</div>


<ul id="missionList"  style="right: 15px; top: 60px; overflow: hidden;z-index: 888;position: fixed;   background:rgb(255,255,255,0.7);box-shadow: 0 0 5px #ccc; ">
</ul>

<div class="missionMenu">
	<a href="javascript:void(0);" onclick="missionInfo();" class="droneli" style="background: #ef123b"><i class="layui-icon layui-icon-console" ></i><div>详情</div></a>
	<a href="javascript:void(0);" onclick="missionDuplicate();" class="droneli" style="background: #1c333f"><i class="layui-icon layui-icon-read" ></i><div>复制</div></a>
	
</div>


<div id="missionInfo"  style="padding: 10px;display: none;">
	<br/>

	<form class="layui-form layui-form-pane" action="" lay-filter="dataForm" >
	
		<input type="text" id="misNo" name="misNo" style="display: none;" autocomplete="off" class="layui-input">
		<input type="text" id="misData" name="misData" style="display: none;" autocomplete="off" class="layui-input">
					
		<div class="layui-form-item">
		    <label class="layui-form-label">任务名称</label>
		    <div class="layui-input-block">
		      <input type="text" name="misName" placeholder="任务名称" autocomplete="off" class="layui-input">
		    </div>
	    </div>
	    
	    <div class="layui-form-item">
		    <label class="layui-form-label">类型</label>
		    <div class="layui-input-block" >
		    	<select id="misType" name="misType" lay-verify="required" lay-search>
					<option th:each="entry : ${T(drone.basis.dictionary.MissionDict).values()}" th:value="${entry.name()}" th:text="${entry.name}"></option>
				</select>
		    </div>
		</div>
		
		<div class="layui-form-item">
		    <label class="layui-form-label">描述</label>
		    <div class="layui-input-block">
		      <textarea id="misDesc" name="misDesc" style="height: 300px;" placeholder="请输入任务简介" class="layui-textarea" ></textarea>
		    </div>
		</div>
		
		<div class="layui-form-item">
		    <label class="layui-form-label">排序号</label>
		    <div class="layui-input-block">
		      <input type="text" id="misSort" name="misSort" placeholder="排序号" autocomplete="off" class="layui-input">
		    </div>
	    </div>
	    
	    <br/>
	  
	    <div class="layui-form-item">
		    <div class="layui-input-block">
		       	  <div class="layui-btn-group">
			      	<button type="button" class="layui-btn" lay-submit=""><i class="layui-icon layui-icon-form"></i>&nbsp;&nbsp;保存</button>
			      </div>
		    </div>
	    </div>
				    
	</form>
</div>

<div id="missionDetail" style="padding: 10px;display: none;">
	<blockquote class="layui-elem-quote">提示 : 穿越任务点(0:悬停:1穿越) 相机动作(无动作:NONE 拍照:TAKE_PHOTO 开始定时拍照:START_PHOTO_INTERVAL 停止定时拍照:STOP_PHOTO_INTERVAL 开始录像:START_VIDEO 停止录像:STOP_VIDEO)</blockquote>
	<table id="dataTable"></table>
	
	 <div id="dataTool" style="display: none;">
	  	<div  class="layui-btn-group">
		    <button class="layui-btn layui-btn-sm" onclick="missionRemove();"><i class="layui-icon layui-icon-delete"></i>&nbsp;&nbsp;删除选定</button> 
	  	</div>
	  </div>
</div>


<div class="cpy">
	<div th:replace="web/common::copy"></div>
</div>

<script type="text/javascript" th:src="@{/js/hotkeys.js}"></script>
<script type="text/javascript" th:src="${@mapConfig.SRC}"></script> 
<script type="text/javascript">
var mission=null;


var map = null;
var geo = "[[${@mapConfig.GEO}]]";
var mapLng="[[${@mapConfig.LNG}]]";
var mapLat="[[${@mapConfig.LAT}]]";
var mapZoom="[[${@mapConfig.ZOOM}]]";
</script>
<script type="text/javascript" th:inline="none">
$("#container").css({"width":$(window).width()-10+"px","height":$(window).height()-55+"px","margin-left":"5px"});

$(function(){
	
	map = new T.Map("container");
	map.centerAndZoom(new T.LngLat(mapLng, mapLat), mapZoom);
	var ctrl = new T.Control.MapType();
	map.addControl(ctrl);
	map.setMapType(TMAP_HYBRID_MAP);
	
	var menu = new T.ContextMenu({
	       width: 120
	});
	var mi1 = new T.MenuItem("添加任务点", function(e){
		missionTask(e.lng,e.lat)
	});
	var mi2 = new T.MenuItem("任务配置", function(e){
		layer.open({
	        type: 1,
	        title: "配置任务节点信息",
	        shadeClose: true,
	        shade: 0.4,
	        area: ['90%', '90%'],
	        content: $('#missionDetail')
	    });
	});
	menu.addItem(mi1);
	menu.addItem(mi2);
	map.addContextMenu(menu);
	
	hotkeys('ctrl+s', function() {
		missionPersist();
	  	return false;
	});
	
	init(layui.url().search.misNo);
})

function init(misNo){
	
	var missionList=jsonAsync("/mission/collect",{"sortField":"misSort","sortOrder":"true"},function(result){
		$("#missionList").empty();
		map.clearOverLays();
		for(let i in result.resultList){
			let m=result.resultList[i];
			$("#missionList").append("<li id='"+m.misNo+"' class='missionList' style='cursor:pointer;' onclick='missionChose(\""+m.misNo+"\");'>"+m.misName+"</li>");
		}
		if(!misNo){
			missionChose(result.resultList[0].misNo);	
		}else{
			missionChose(misNo);
		}
	})
}

function missionInfo(){
	
	form.val("dataForm", mission);
	layer.open({
        type: 1,
        title: "配置任务主信息",
        shadeClose: true,
        shade: 0.4,
        area: ['480px', '640px'],
        content: $('#missionInfo')
    });
}

function missionDuplicate(){
	layer.confirm('确定要复制选定的数据吗?', {icon: 3, title:'提示'}, function(index){
		var copyData=json('/mission/paste',mission);
		init();
	});
}

function missionChose(misNo){
	
	jsonAsync("/mission/grab",{"misNo":misNo},function(result){
		$("#missionList").find("li").each(function(idx,obj){
			$(obj).attr("class","missionList");
			if($(obj).attr("id")==misNo){
				$(obj).attr("class","missionListSelected");	
			}
		});
		mission=result;
		missionDraw();
	})
	
}

//绘制图表,画线,生成table
function missionDraw(){
	
	map.clearOverLays();
	
	$("#missionName").text(mission.misName);
	$("#missionDesc").text(mission.misDesc);
	
	let tasks=JSON.parse(mission.misData);
	let line=new Array();
	for(let i in tasks){
		let task=tasks[i];	
		createMarker(task.id,task.sort,task.lng,task.lat);
		line.push(new T.LngLat(task.lng,task.lat));
	}
    map.addOverLay(new T.Polyline(line));
    
    tableConfig.height='full-260';
	tableConfig.cols=[[ 
	    {type:'checkbox' ,fixed: 'left'},
	    {type:'numbers' },
	    {field: 'sort', title: '序号', sort: true,width:80,edit: 'text'},
	    {field: 'name', title: '名称', sort: false,width:320,edit: 'text'},
	    {field: 'lng', title: '经度', sort: true,width:120},
	    {field: 'lat', title: '纬度', sort: true,width:120},
	    {field: 'relalt', title: '相对高度(米)', sort: false,width:120,edit: 'text'},
	    {field: 'speed', title: '速度(米/秒)', sort: false,width:120,edit: 'text'},
	    {field: 'through', title: '穿越任务点', sort: false,width:120,edit: 'text'},
	    {field: 'loiter', title: '悬停时间(秒)', sort: false,width:120,edit: 'text'},
	    {field: 'gimpatch', title: '相机俯仰(度)', sort: false,width:120,edit: 'text'},
	    {field: 'gimyaw', title: '相机偏航(度)', sort: false,width:120,edit: 'text'},
	    {field: 'camera', title: '相机动作', sort: true,width:240,edit: 'text'},
	    {field: 'interval', title: '拍照间隔(秒)', sort: false,width:120,edit: 'text'},
	    {field: 'distance', title: '拍照距离(米)', sort: false,width:120,edit: 'text'},
	    {field: 'radius', title: '到达半径(米)', sort: false,width:120,edit: 'text'},
	    {field: 'yaw', title: '偏航角度(度)', sort: false,width:120,edit: 'text'}
	]];

	tableConfig.data=JSON.parse(mission.misData);
	var tableInstance =table.render(tableConfig);
	
}

//创建任务点
function missionTask(lng,lat){
	
	let url=geo+"&postStr="+encodeURIComponent("{'lon':" + lng + ",'lat':" + lat + ",'ver':1}")+"&type=geocode";
	let name="无";
	let georesult=json(url, {});
	if(georesult&&georesult.msg=="ok"){
		name=georesult.result.formatted_address;
	}
	
	layer.prompt({formType:0,value: name,title: '确认任务点名称',maxlength: 50,width:'400px'},function(value, index, elem){
		if(!value||Number.isNaN(value)){
			value="无";
		}
		let tasks=JSON.parse(mission.misData);
		let task=new Object();
		task.id=guid();
		task.sort=tasks.length.toString().padStart(2, '0');
		task.name=value;
		task.lng=lng;
		task.lat=lat;
		task.relalt=0;
		task.speed=5;
		task.through="1";
		task.loiter="";
		task.gimpatch="";
		task.gimyaw="";
		task.camera="NONE";
		task.interval="";
		task.distance="";
		task.radius="";
		task.yaw="";
		tasks.push(task);
		mission.misData=JSON.stringify(tasks);
		console.log(mission)
		missionDraw();
		layer.close(index);
	});
	
}

//任务主信息保存
function missionPersist(){
	var resultData=json("/mission/write", mission);
	if(resultData.codeInfo=="0"){
	 	layer.alert(resultData.messageInfo,{icon: 5});
	}else{
		layer.msg("保存完毕",{icon: 1});
	}
}

//task更新
function missionUpgrade(id,obj){
	
	let misData=JSON.parse(mission.misData);
	
	let item= misData.find(function (it) {
	    return it.id == id
	})
	
	console.log(id)
	item.sort=obj.sort;
	item.name=obj.name;
	item.relalt=obj.relalt;
	item.speed=obj.speed;
	item.through=obj.through;
	item.loiter=obj.loiter;
	item.gimpatch=obj.gimpatch;
	item.gimyaw=obj.gimyaw;
	item.camera=obj.camera;
	item.interval=obj.interval;
	item.distance=obj.distance;
	item.radius=obj.radius;
	item.yaw=obj.yaw;
	
	mission.misData=JSON.stringify(misData);
	missionDraw();
	
}

//task删除
function missionRemove(){
	let checkArray = table.checkStatus("dataTable").data;
	let misData=JSON.parse(mission.misData);
	
	if(checkArray.length==0){
		layer.msg("未选中任何数据");
		return;
	}
	
	let list=checkArray.map(function(item){
		return item.id;
	})
	
	layer.confirm('确定要删除选定的数据吗?', {icon: 3, title:'提示'}, function(index){
		for(let i in list){
			let id=list[i];
			misData.forEach(function(it, idx, array) {
			    if(it.id == id) {
			    	misData.splice(idx, 1);
			    }
			});
			mission.misData=JSON.stringify(misData);
			missionDraw();
		}
       	layer.close(index);
	});
	
}

function createMarker(id,sort,lng,lat){
	var icon = new T.Icon({
        iconUrl: "/images/mission/"+sort+".png",
        iconSize: new T.Point(40, 40),
        iconAnchor: new T.Point(10, 25)
    });
    var marker = new T.Marker(new T.LngLat(lng, lat), {icon: icon});
    marker.id=id;
    marker.lng=lng;
    marker.lat=lat;
    map.addOverLay(marker);
    marker.enableDragging();
    
    marker.addEventListener("dragend",function(e){
    	
    	let tasks=JSON.parse(mission.misData);
		let task=tasks.find(function(item){
			return item.id===e.target.id;
		});
		task.lng=e.lnglat.lng;
		task.lat=e.lnglat.lat;
		mission.misData=JSON.stringify(tasks);
    	missionDraw();
	});
    
    marker.addEventListener("dblclick",function(e){
		layer.confirm('确定要删除该坐标吗?', {icon: 3, title:'提示'}, function(index){
	    		
    	});
	});
}

table.on('edit()', function(obj){
	missionUpgrade(obj.data.id,obj.data);
});

form.on('submit()', function(data){
	var resultData=json("/mission/write", data.field);
	  if(resultData.codeInfo=="0"){
		  layer.alert(resultData.messageInfo,{icon: 5});
	  }else{
		  layer.alert(resultData.messageInfo,{icon: 1},function(index){
			  layer.closeAll();
			  init(data.field.misNo);
			});
	  }
	  return false; 
});

</script>

<script th:replace="web/common::tail"></script>
</body>
</html>